<template>
  <div class="wuhan-geo-map">
    <div class="arcgis-map" id="wuhanmap"></div>
    <div class="markerlist">
      <button @click="showMarkersByType('机场')">机场</button>
      <button @click="showMarkersByType('火车站')">火车站</button>
      <button @click="showMarkersByType('医院')">医院</button>
      <button @click="showMarkersByType('公园')">公园</button>
      <button @click="showMarkersByType('博物馆')">博物馆</button>
    </div>
    <!-- <infoPanel :data="panelData"></infoPanel> -->
  </div>
</template>

<script>
import Vue from "vue";
import infoPanel from "./infoPanel.vue";
import wuhanGeoJson from "../config/wuhan.geoJson";
import landmark from "../config/landmark.json";
import { loadModules } from "esri-loader";
export default {
  components: { infoPanel },
  data() {
    return {
      map: null,
      mapView: null,
      markers: [],
      showMarkers: [],
      // panelData: [],
      resizeClock: null,
    };
  },
  mounted() {
    this.initMap();
    // window.addEventListener("resize", () => {
    //   this.updatePanelData();
    // });
  },
  methods: {
    showMarkersByType(type) {
      if (this.showMarkers.length === 0) {
        let target = this.markers.filter((item) => {
          return item.attributes.type === type;
        });
        this.showMarkers = target;
        console.log(this.showMarkers);
        this.mapView.graphics.addMany(this.showMarkers);
        return;
      }
      let target = this.showMarkers.filter(
        (item) => item.attributes.type === type
      );
      if (target && target.length) {
        this.mapView.graphics.removeMany(target);
        this.showMarkers = this.showMarkers.filter(
          (item) => item.attributes.type !== type
        );
        this.panelData.forEach((item) => {
          if (item.type == type) {
            item.show = false;
          }
        });
      } else {
        target = this.markers.filter((item) => item.attributes.type === type);
        this.mapView.graphics.addMany(target);
        this.showMarkers = this.showMarkers.concat(target);
      }
    },
    async initMap() {
      const [Map, MapView, GeoJSONLayer, Polygon, PopupTemplate] =
        await loadModules(
          [
            "esri/Map",
            "esri/views/MapView",
            "esri/layers/GeoJSONLayer",
            "esri/geometry/Polygon",
            "esri/PopupTemplate",
          ],
          {
            css: true,
            //   version: "3.70",
          }
        );

      const wuhanBlob = new Blob([JSON.stringify(wuhanGeoJson)], {
        type: "application/json",
      });
      const WuHangGeoJSONLayer = new GeoJSONLayer({
        url: URL.createObjectURL(wuhanBlob),
        copyright: "Wuhan",
      });

      this.map = new Map({
        layers: [WuHangGeoJSONLayer],
      });
      this.mapView = new MapView({
        container: "wuhanmap",
        map: this.map,
        center: [114.296173, 30.592868],
        zoom: 4,
      });
      this.setMapConstraints(Polygon);
      console.log(PopupTemplate);
      this.initMarkers(PopupTemplate);
      // this.initGraphicsClick();
    },
    setMapConstraints(Polygon) {
      const chinaBoundary = new Polygon({
        rings: [
          [
            [113.996226, 30.419967],
            [113.996226, 30.739598],
            [114.665747, 30.739598],
            [114.665747, 30.419967],
            [113.996226, 30.419967],
          ],
        ],
        spatialReference: { wkid: 4326 },
      });

      this.mapView.constraints = {
        geometry: chinaBoundary,
      };
    },

    updatePanelData() {
      if (this.panelData.length) {
        this.panelData.forEach((item) => {
          const res = this.mapView.toScreen({
            x: item.longitude,
            y: item.latitude,
            spatialReference: { wkid: 4326 },
          });
          item.x = res.x;
          item.y = res.y;
        });
      }
    },
    // initGraphicsClick() {
    //   this.mapView.on("click", (e) => {
    //     const { x, y } = e;
    //     this.mapView.hitTest({ x, y }).then((res) => {
    //       if (res.results.length) {
    //         const graphic = res.results[0].graphic;
    //         if (graphic) {
    //           if (graphic.attributes.name) {
    //             this.panelData.forEach((item) => {
    //               if (item.id === graphic.attributes.id) {
    //                 item.show = !item.show;
    //               }
    //             });
    //           }
    //         }
    //       }
    //     });
    //   });
    // },
    async initMarkers(PopupTemplate) {
      const [Graphic] = await loadModules(["esri/Graphic"]);
      this.markers = landmark.map((item) => {
        const dom = new (Vue.extend(infoPanel))({
          propsData: {
            data: item,
          },
        }).$mount(document.createElement("div")).$el;
        console.log("---");
        console.log(dom);
        return new Graphic({
          geometry: {
            type: "point",
            longitude: item.longitude,
            latitude: item.latitude,
          },
          symbol: {
            type: "picture-marker",
            url: item.icon,
            width: 15,
            height: 15,
            angle: 0, // 旋转角度
          },
          attributes: {
            id: item.id, // 唯一标识
            name: item.name,
            type: item.type,
          },
          popupTemplate: new PopupTemplate({
            title: "",
            actions: [],
            content: `<div class='panel'>${item.name}</div>`,
          }),
        });
      });
      // setTimeout(() => {
      //   this.initPanelData();
      // }, 1000);
    },
    initPanelData() {
      for (let item of landmark) {
        const res = this.mapView.toScreen({
          x: item.longitude,
          y: item.latitude,
          spatialReference: { wkid: 4326 },
        });
        this.panelData.push({
          id: item.id, // 唯一标识
          name: item.name,
          type: item.type,
          x: res.x,
          y: res.y,
          longitude: item.longitude,
          latitude: item.latitude,
          show: false,
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.wuhan-geo-map {
  width: 100%;
  height: 100%;
  position: relative;
  .arcgis-map {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
  }
  .markerlist {
    position: absolute;
    right: 15px;
    top: 15px;
    z-index: 8;
  }
}
</style>
